<template>
    <div>
        <h1>小满最骚</h1>
        <div>
            <!--            是页面路由跳转的方式一：<router-link>标签-->
<!--            <router-link replace :to="{ name: 'Login' }">Login</router-link>-->
<!--            <router-link replace style="margin-left: 10px" :to="{ name: 'Register' }">Register</router-link>-->
            <!--            方式二：编程式导航-->
<!--            <button @click="toPage('Login')">-->
<!--                Login-->
<!--            </button>-->
<!--            <button @click="toPage('Register')">-->
<!--                Register-->
<!--            </button>-->

            <!--            方式三：<a>标签，虽然也可以使路由跳转，但会导致页面刷新，所以不建议使用-->
<!--            <a href="/">Login</a>-->
<!--            <a style="margin-left: 10px" href="/reg">Register</a>-->
        </div>
        <hr>
        <router-view/>
    </div>
</template>

<script>
export default {
    methods: {
        // 方式二：编程式导航对应的JS代码
        toPage(data) {
            // 以下两种方式都可以实现跳转
            // this.$router.push(path)
            // this.$router.push({
            //     name: data
            // })
            // 等同于在router-link标签中添加replace参数
            this.$router.replace({
                name: data
            })
        }
    }
}
</script>